<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #magnifier {
        width: 800px;
        height: 500px;
        position: absolute;
        left: 0px;
        top: 0px;

    }

    #small-box {
        width: 300px;
        height: 300px;
        background-color: rgb(201, 217, 248);
        position: absolute;


    }

    #shadow-box {
        width: 100px;
        height: 100px;
        background-color: rgb(233, 247, 49);
        opacity: .5;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }

    #big-box {
        width: 300px;
        height: 300px;
        background-color: cornflowerblue;
        position: absolute;
        left: 300px;
        top: 0;
        display: none;
        overflow: hidden;
    }
    #big-box img{
        width: 200%;
        height: 200%;
    }

    #some-box {
        width: 260px;
        height: 100px;
        background-color: rgb(200, 207, 219);
        position: absolute;
        top: 300px;
        left: 20px;

    }

    #some-box #dark {
        width: 100%;
        height: 100%;
        background-color: rgb(241, 231, 231);
        overflow: hidden;

    }

    #small-box img {
        width: 100%;
        height: 100%;
    }


    #some-box ul {
        width: 260px;
        height: 80px;
        position: relative;
        left: 0px;
        top: 10px;
        display: flex;
        justify-content: space-between;

    }

    #some-box ul li {
        list-style-type: none;
        width: 80px;
        height: 80px;
    }

    #some-box ul li img {
        width: 100%;
        height: 100%;
    }


    #some-box #btnLeft {
        width: 15px;
        height: 80px;
        position: absolute;
        top: 10px;
        left: -18px;
    }

    #some-box #btnRight {
        width: 15px;
        height: 80px;
        position: absolute;
        top: 10px;
        right: -18px;
    }
</style>

<body>
    <div id="magnifier">

    </div>
</body>

</html>
<script src="../jQuery.mini.js"></script>
<script>
    class magnifier {
        constructor(div, arr) {
            this.div = div;
            this.arr = arr;
            this.event();
        }

        h5_c3() {
            this.div.html(` <div id="small-box">
          <img src="${this.arr[0]}" >
            <div id="shadow-box"></div>
        </div>
        <div id="big-box">
            <img src="${this.arr[0]}" >
        </div>
        <div id="some-box">
            <button id="btnLeft"><</button>
            <div id="dark"><ul>
            
            </ul></div>
        
        <button id="btnRight">></button>
        </div> `);
            let str = '';
            for (let i = 0; i < this.arr.length; i++) {

                str += `<li><img src="${this.arr[i]}"></li>`
            }
            $('ul').html(str);
            $('ul')[0].style.width = this.arr.length * 87 + 'px';
          
            
        }
        disPlay_disappear() {
            $('#small-box').on('mouseenter mouseleave', function () {
                $('#big-box').fadeToggle(300);
                $('#shadow-box').fadeToggle(300);
            })
            
        }
        boxMove() {
            $('#small-box').on('mousemove', function (e) {
                let x = e.pageX - $('#magnifier').offset().left - $('#shadow-box').width() / 2;
                let y = e.pageY - $('#magnifier').offset().top - $('#shadow-box').height() / 2;

                if (x < $('#magnifier').offset().left) { x = $('#magnifier').offset().left }
                if (y < $('#magnifier').offset().top) { y = $('#magnifier').offset().top }
                if (x > $('#magnifier').offset().left + $('#small-box').width() - $('#shadow-box').width()) { x = $('#magnifier').offset().left + $('#small-box').width() - $('#shadow-box').width() }
                if (y > $('#magnifier').offset().top + $('#small-box').height() - $('#shadow-box').height()) { y = $('#magnifier').offset().top + $('#small-box').height() - $('#shadow-box').height() }

                $('#shadow-box').offset({ top: y, left: x });
            });
        }
        imgClick() {
            let that = this;
            $('li').on('click', function () {
                $('#small-box').html(`${$(this).html()}
            <div id="shadow-box"></div>`);
            $('#big-box').html(`${$(this).html()}`);
            })
        }
        btnClick() {
            $('#btnRight').on('click', function () {
                $('#some-box ul').stop().animate({ left: -($('li').length-3)*90+'px' }, "slow");
            });
            $('#btnLeft').on('click', function () {
                $('#some-box ul').stop().animate({ left: '5px' }, "slow");
            });
        }

        event() {
            this.h5_c3();
            this.disPlay_disappear();
            this.boxMove();
            this.btnClick()
            this.imgClick();
        }

    }
    let m1 = new magnifier($('#magnifier'), ['https://img0.baidu.com/it/u=3426862555,750570638&fm=26&fmt=auto&gp=0.jpg', 'https://img0.baidu.com/it/u=708072002,1730595124&fm=26&fmt=auto&gp=0.jpg', 'https://img0.baidu.com/it/u=2351480319,389916690&fm=26&fmt=auto&gp=0.jpg', 'https://img2.baidu.com/it/u=1867599787,2163772528&fm=11&fmt=auto&gp=0.jpg', 'https://img1.baidu.com/it/u=4047412610,3230584674&fm=11&fmt=auto&gp=0.jpg'])
</script>
<script src="../js/cookie.js"></script>